<template>
	<view class="Spikedetail">
		<view class="Spikedetail_titleBox">
			<view @click="backReturn" class="Spikedetail_titleBox_left">
				<image src="../../../static/home/back_White.png" mode="widthFix"></image>
			</view>
			<view class="Spikedetail_titleBox_text">
				高档防水手表
			</view>
		</view>
		<view class="Spikedetail_bannerBox">
			<image class="Spikedetail_banner" src="../../../static/home/detailbanner.jpg" mode=""></image>
			<view class="Spikedetail_bannerBox_textBox">
				<view class="Spikedetail_bannerBox_textBox_list">
					价值：100-300
				</view>
				<view class="Spikedetail_bannerBox_textBox_list">
					预约券：10
				</view>
				<view class="Spikedetail_bannerBox_textBox_list">
					赠送牛果：30
				</view>
				<view class="Spikedetail_bannerBox_textBox_list">
					提货等待周期：10
				</view>
				<view class="Spikedetail_bannerBox_textBox_list">
					收益比例：8
				</view>
			</view>
		</view>
		<view class="detail_title">
			商品详情
		</view>
		<view class="Spikedetail_detail">
			<image src="../../../static/home/detailImg.jpeg" mode="widthFix"></image>
		</view>
		<view class="Spikedetail_bottomBox">
			<button class="Spikedetail_bottomBox_reservation">
				即刻预约
			</button>
			<button @click="config" class="Spikedetail_bottomBox_panicBuying">
				立即抢购
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onShow: function() {

		},
		methods: {
			backReturn() {
				uni.navigateBack({});
			},
			config(){
				uni.navigateTo({
					url: '/pages/index/SeckillConfirmation/SeckillConfirmation',
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.Spikedetail {
		padding-bottom: 140upx;

		.Spikedetail_titleBox {
			background-image: linear-gradient(to right, #FE3D47, #FC773D);
			padding-top: calc(var(--status-bar-height) + 20upx);
			padding-bottom: 20upx;
			display: flex;
			align-items: center;
			position: relative;
			justify-content: center;

			.Spikedetail_titleBox_left {
				position: absolute;
				left: 0;
				// top: 50%;
				// transform: translateY(-50%);
				top: auto;
				padding: 0 32upx;

				image {
					width: 18upx;

				}
			}

			.Spikedetail_titleBox_text {
				font-size: 34upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48upx;
			}
		}

		.Spikedetail_bannerBox {
			width: 100%;
			height: 780upx;
			font-size: 0;
			position: relative;

			.Spikedetail_banner {
				width: 100%;
				height: 100%;
			}

			.Spikedetail_bannerBox_textBox {
				background: rgba(0, 0, 0, 0.7);
				padding: 18upx 32upx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				position: absolute;
				bottom: 0;
				width: 100%;

				.Spikedetail_bannerBox_textBox_list {
					width: 50%;
					margin-bottom: 12upx;

					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;


					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40upx;

					&:last-child {
						margin: 0;
					}
				}
			}
		}

		.detail_title {
			width: 100%;
			padding: 32upx;
			text-align: center;
			font-size: 22upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.3);
			line-height: 32upx;
		}

		.Spikedetail_detail {
			image {
				width: 100%;
			}
		}

		.Spikedetail_bottomBox {
			width: 100%;
			height: 140upx;
			background-color: #FFFFFF;
			padding: 24upx 38upx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;

			.Spikedetail_bottomBox_reservation {
				width: 50%;
				background-color: #FFEBCC;
				background: #FFEBCC;
				border-radius: 46upx 0px 0px 46upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
				font-size: 32upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.72);
				line-height: 22upx;

				&::after {
					content: '';
					display: none;
				}
			}

			.Spikedetail_bottomBox_panicBuying {
				background: #ED2525;
				border-radius: 0px 46upx 46upx 0px;
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 32upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 44upx;


				&::after {
					content: '';
					display: none;
				}
			}
		}
	}
</style>
